<!--
名称: 表格组件1
作者: huangdi_cd
日期: 2021/4/15
说明: 用于快速统一构建弹窗页面
-->
<template>
    <div style="height:calc(100% - 1px);">
        <div :style="tableFlag === '0' ? 'max-height:calc(100% - 60px);overflow:auto' : ''">
            <el-table
                :data="tableData"
                ref="grid"
                border
                stripe
                :paramList="paramList"
                size="mini"
                highlight-current-row
                :selectedData ="selectedData"
                @selection-change="handleSelectionChange"
                :render-header="true"
                :header-cell-style="{background:'#FFE4E5',color:'#0c0c0c',fontSize: '12px'}"
                :row-style="{height: '35px',border: 'none'}"
                :cell-style="{padding: '0px'}"
            >
                <el-table-column v-if ="ifUseTableRodio"
                                 type="selection"
                                 reserve-selection
                                 width="55">
                </el-table-column>
                <el-table-column v-if ="ifUseTableOrder"
                                 type="index" label="序号"
                                 width="50">
                </el-table-column>
                <el-table-column v-if = "ifUseTableBase"
                                 resizable="true"
                                 :show-overflow-tooltip='true'
                                 v-for="(item,index) in columns" :key="index"
                                 :prop="item.dataIndex"
                                 :width="item.width"
                                 :label="item.title || index">
                    <template  slot-scope="scope">
                    <span v-html="translateData(scope.row,scope.column,item)">
                    </span>
                    </template>
                </el-table-column>
                <el-table-column v-if = "!ifUseTableBase && !isEditHeader"
                                 :render-header="linefeed"
                                 :show-overflow-tooltip='true'
                                 header-align="center"
                                 v-for="(item,index) in colList" :key="index"
                                 :prop="item.value"
                                 :label="item['name'] || item['value']"
                >
                </el-table-column>
                <el-table-column v-if = "!ifUseTableBase && isEditHeader"
                                 :show-overflow-tooltip='true' align="center"
                                 v-for="(item,index) in colList" :key="index"
                                 :prop="item.colName"  width="210px"
                                 :label="item.nickName || item.colName">
                    <template slot="header" slot-scope="scope">
                        <div class="fcenter">

                            <zidian  :info="zdItem(item)" v-if="showZd"  @complete="complete"></zidian>
                            <data-type-select @complete="complete" :data-type="item.colType" :info="item"></data-type-select>
                            <text-edit @complete="complete" :data-text="item.nickName || item.colName"  :info="item"></text-edit>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column v-if="ifUseTableButton"
                                 :render-header="linefeed"
                                 :show-overflow-tooltip='true'
                                 header-align="center"
                                 align="center"
                                 width="200"
                                 label="操作"
                                 resizable="false">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleDetail(scope.row)">详情</el-button>
                        <el-button v-if="isDelete"
                                   size="mini"
                                   type="text"
                                   @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <div>
            <el-pagination style="margin-top: 10px;text-align: center;"
                           v-if="tableData && isPage"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[15, 25, 50, 100,200]"
                           :page-size="currentPage"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="recordNumber">
            </el-pagination>
        </div>
    </div>

</template>

<script>
import ajax from '@api/ajax'
import {QUERY_EXIST_NICKNAME} from '@api/url'
import TextEdit from "../ATableRadio/textEdit";
import DataTypeSelect from "../ATableRadio/dataTypeSelect";
import zidian from "../ATableRadio/zidian";
export default {
    name: 'ATableReady',
    components: {zidian, DataTypeSelect, TextEdit},
    props: {
        isEditHeader:{
          type:Boolean,//表头可修改
          default:false,
        },
        colList: {
            type: Array,
            default: []
        },
        tableData: {
            type: Array,
            default: []
        },
        width: {
            type: [String,Number]
        },
        recordNumber: {
            type: Number,
            default: 15
        },
        ifUseTableButton: {
            type: Boolean,
            default: false
        },
        ifUseTableRodio: {
            type: Boolean,
            default: false
        },
        selectedData: {
            type: Array
        },
        ifUseTableBase: {
            type: Boolean,
            default: false
        },
        columns: {
            type: Array
        },
        ifUseTableOrder: {
            type: Boolean,
            default: false
        },
        isDelete: {
            type: Boolean,
            default: true
        },
        height: {
            type: [String,Number],
            default: window.innerHeight - 130
        },
        paramList: {
            type: Array
        },
        isPage: {
            type: Boolean,
            default: true
        },
        tableFlag: {
            type: String,
            default: '0'
        }
    },
    data () {
        return {
            currentPage: 1, // 默认显示第1页面
            pageNo: 1, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
            pageSize: 15, // 默认参数改变此处需要改变父组件传参的默认值，需要保持一致
            showZd:false,
            exixtLists:[],//存在的修改过的别名数据
        }
    },
    watch:{
        colList(val){
            this.searchExixtData();
        }
    },
    computed:{
        zdItem(){
            return function (item) {
                let temp = this.exixtLists.filter(cur=>cur.colName==item.colName);//查看该数据是否有修改，有就使用修改后的数据
                if(temp && temp.length>0){
                    return temp[0]
                }else{
                    item.colName=item.value;//列名
                    return item;
                }
            }
        }
    },
    methods: {
        // 改变页大小
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            // 调用父组件查询接口
            this.$emit('getData', {pageNo: this.pageNo, pageSize: val})
        },
        // 改变页码，调用父组件查询接口
        handleCurrentChange (val) {
            console.log(`当前页: ${val}`)
            this.pageNum = val
            this.$emit('getData', {pageNo: val, pageSize: this.pageSize})
        },
        linefeed (h, {column, index}) { // column,index都是el-table中自带的
            let number = column.label.length // 表头字数
            let size = 16 // 字体尺寸
            column.minWidth = number * size // 计算宽度
            return h('div', {class: 'table-head', style: {width: '100%', height: '25px'}}, [column.label])
        },
        // 编辑行
        handleEdit (row) {
            this.$emit('handleEdit', row)
        },
        // 查看行详情
        handleDetail (row) {
            this.$emit('handleDetail', row)
        },
        // 删除行
        handleDelete (row) {
            this.$emit('handleDelete', row)
        },
        // 获取选中行数据
        handleSelectionChange () {
            let val = this.$refs.grid.selection
            this.$emit('getSelectRows', val)
        },
        // 反显选中数据
        selectRows (val) {
            this.$nextTick(() => {
                this.selectedData.forEach(col => {
                    this.tableData.forEach(row => {
                        if (col[val] == row[val]) {
                            this.$refs.grid.toggleRowSelection(row, true)
                        }
                    })
                })
                // 可以调用那个选择改变的方法
                this.flagTmp = true
            })
        },
        getSelectRowData () {
            return this.$refs.grid.selection
        },
        clearSelection () {
            return this.$refs.grid.clearSelection()
        },
        setPage (pageSize = 15, pageNo = 1) {
            this.pageSize = pageSize
            this.pageNo = pageNo
            this.currentPage = pageNo
        },
        // 对数据进行翻译
        translateData (row, column, item) {
            // 需要翻译的具体哪个字段
            var col = column['property']
            var tmp = row[col]
            if (item.ifTranslate != undefined && item.ifTranslate) {
                var flag = true
                // 进行翻译的调用
                this.paramList.forEach(item => {
                    if (item.type === column['property'] && item.code === row[col] && flag) {
                        tmp = item['value']
                        return tmp
                    }
                })
            }
            return tmp
        },
        // 重新请求数据
        complete() {
            this.$emit('complete')
        },
        //查询存在的别名数据，用于字典回显
        searchExixtData(){
            ajax.post(QUERY_EXIST_NICKNAME, {
                optMode: '1', modelId: this.colList[0].modelId, pageNo: 1, pageSize: 1000
            }).then(res=>{
                this.exixtLists=res.data;
                this.showZd=true;
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.el-table .cell.el-tooltip {
    white-space: pre-wrap !important;
}
</style>
